<template>
	<div :class="type==0?'table':(type==3?'table2':'table')" :style="(!nav[0])?'height: 13.020833rem;':''">
		<div class="header">
			<div class="x"></div>
			<div class="text">
				<span></span>{{tit}}
			</div>
		</div>
		<div class="nav" v-if="nav[0]" :style="(navShow)?'display:none;':''">
			<div class="li" v-for="i in nav">
				<div class="top">
					{{i.dat}}
				</div>
				<div class="bot">
					{{i.ti}}
				</div>
			</div>
		</div>
		<div :class="type==3?'bot2':'bot1'">
			<div class="tab" ref="tab" :style="nav[0]?((navShow?'height: 15.104166rem;':'height: 13.020833rem;')):'height: 13.020833rem;'">
			</div>
			<div class="quan" v-if="type==3">
				<div class="top">
					276
				</div>
				<div class="cen">
					实有
				</div>
				<div class="bot">
					90%
				</div>
			</div>
			<div class="bott" v-if="type==3">
				实好率
			</div>
			<div class="tuli" v-if="type==3">
				<div class="li" v-for="i in 2">
					<div class="l"></div>
					<div class="r">
						<div class="t">270</div>
						<div class="b">完好</div>
					</div>
				</div>
			</div>
			<div class="bianzhi" v-if="type==3">
				<img src="../assets/img/体系文件编制申请单-51.png" >
				<span>编制</span>
				321
			</div>
		</div>
	</div>
</template>

<script>
	import echar from '../assets/js/option.js'
	export default {
		data() {
			return {

			}
		},
		props:{
			x:{
				default:['初级', '中级', '高级']
			},
			data:{
				default:[23,90,10]
			},
			col:{
				default:['#f60',"#f77","#F90"]
			},
			ym:{
				default:100
			},
			ti:{
				default:'数量'
			},
			nav:{
				default:[]
			},
			tit:{
				default:'人员实力'
			},
			barW:{
				default:'50%'
			},
			type:{
				default:0
			},
			optionObj3:{
				default:{
					co1:'#72c49d',
					co2:'#049ecf',
					max:100,
					value1:50,
					value2:70
				}
			},
			navShow:true
		},
		mounted() {
			echar(this.$refs.tab,this.x,this.data,this.ym,this.col,this.ti,this.barW,this.type,this.optionObj3)
			console.log(this.nav[0])
		}
	}
</script>

<style lang="less" scoped="scoped">
	*{
		margin: 0;
		padding: 0;
	}
	.table2{
		width: 49% !important;
		height: 12.5rem !important;
		box-shadow: inset 0px 0px 5px 8px #183e73 !important;
		.header{
			width: 100%;
			.x{
				width: 96% !important;
			}
			.text{
				width: 96% !important;
			}
		}
	}
	.table,.table2 {
		width: 100%;
		height: 16.666666rem;
		box-shadow: 0 0 1px #0048AB;
		background-color: #052e53;

		.header {
			width: 100%;
			height: 2.1875rem;
			position: relative;
			.x {
				width: 96%;
				height: 1.041666rem;
				border: 1px solid #2a435e;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.text {
				width: 96%;
				height: 1.145833rem;
				display: flex;
				align-items: center;
				font-size: 0.885416rem;
				position: absolute;
				right: 0;
				top: 0.572916rem;
				color: #ace1fe;
				background-color: #052e53;

				span {
					width: 0.520833rem;
					height: 0.520833rem;
					border-radius: 100%;
					background-color: #00cbff;
					margin-right: 0.520833rem;
				}

			}
		}

		.nav {
			width: 90%;
			margin: 0 auto;
			height: 3.28125rem;
			border-radius: 0.78125rem;
			background-image: linear-gradient(to top, #366691, #063764);
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #fff;
			margin-top: 0.520833rem;

			.li {
				width: 3.958333rem;
				height: 2.1875rem;
				text-align: center;
				font-size: 0.833333rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.top {
					font-weight: 800;
				}
			}
		}
		.bot1{
			.tab {
				// background-color: red;
				display: flex;
				justify-content: center;
				width: 95%;
				margin: 0 auto;
			}
		}
		.bot2{
			width: 25.041666rem;
			height: 10rem;
			padding: 0.78125rem;
			box-sizing: border-box;
			position: relative;
			.tab{
				width: 36.458333rem;
				height: 26.041666rem !important;
				margin: 0;
				transform: scale(0.4) translate(-90%,-90%);
			}
			.quan{
				position: absolute;
				z-index: 2;
				left: 2.916666rem;
				top: 2.447916rem;
				width: 5.729166rem;
				height: 5.729166rem;
				background-color: #062d50;
				border-radius: 100%;
				border: 1px solid #049ecf;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.top{
					font-size: 0.9375rem;
					height: 1.041666rem;
					line-height: 1.041666rem;
					color: #fff;
				}
				.cen{
					width: 3.645833rem;
					text-align: center;
					font-size: 0.833333rem;
					color: #0783f0;
					height: 1.5625rem;
					border-bottom: 1px dashed #fff;
					line-height: 1.25rem;
				}
				.bot{
					font-size: 0.833333rem;
					color: #30ca49;
					height: 1.5625rem;
					line-height: 1.5625rem;
				}
			}
			.bott{
				position: absolute;
				bottom: 0.520833rem;
				left: 2.604166rem;
				background-color: #0881ea;
				border-radius: 0.520833rem;
				color: #fff;
				width: 6.25rem;
				height: 2.083333rem;
				text-align: center;
				line-height: 2.083333rem;
				z-index: 4;
				font-size: 0.9375rem;
				font-weight: 700;
			}
			.tuli{
				width: 3.125rem;
				height: 80%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: absolute;
				top: 1.5625rem;
				left: 11.979166rem;
				.li{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.l{
						width: 0.78125rem;
						height: 0.78125rem;
						background-color: red;
					}
					.r{
						height: 2.604166rem;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.t{
							font-size: 1.041666rem;
							font-weight: 800;
							color: #fff;
						}
						.b{
							font-size: 0.9375rem;
							color: #049ecf;
						}
					}
				}
			}
			.bianzhi{
				width: 30%;
				height: 35%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #097ab0;
				color: #fff;
				font-size: 0.9375rem;
				position: absolute;
				right: 1.041666rem;
				top: 2.34375rem;
				border-radius: 0.208333rem;
				font-weight: 800;
				img{
					width: 30%;
					height: 50%;
				}
				span{
					font-size: 0.833333rem;
					padding: 0 0.520833rem;
					font-weight: 400;
				}
			}
		}
	}
	:deep(element.style){
		border: 2px solid red;
		height: 1200px;
	}
</style>
